import BaseChart from '@/components/echarts/BaseChart';
import { fontSizeRem } from '@/utils/fontSizeRem';
import type { EChartsOption, SeriesOption } from 'echarts';
import 'echarts-liquidfill';

// 定义组件 props 类型
interface Props {
  yearGrowth: string;  // 声明为字符串类型参数
}

const YearGrowth = ({ yearGrowth }: Props) => {
  const options = {
    series: [{
      type: 'liquidFill',
      radius: '80%',
      center: ['50%', '50%'],
      data: [0.65, 0.55, 0.45],
      color: [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(76,189,255,0.8)'
        }, {
          offset: 1,
          color: 'rgba(22,93,255,0.8)'
        }]
      }],
      backgroundStyle: {
        color: 'rgba(22,93,255,0.1)',
        borderWidth: 2,
      },
      label: {
        show: true,
        formatter: yearGrowth,
        fontSize: fontSizeRem(12),
        color: '#fff'
      },
      amplitude: 6,
      waveAnimation: true
    },
    {
      type: 'pie',
      radius: ['70%', '85%'],
      center: ['50%', '50%'],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
        },
      },
      data: [
        {
          value: 100,
          itemStyle: {
            color: '#5dc4f1'
          },
        },
        {
          value: 0,
          itemStyle: {
            normal: {
              color: 'transparent',
            },
          },
        },
      ],
    },
    ] as SeriesOption[] // 使用扩展后的类型
  } as EChartsOption;

  return (
    <>
      <h4>年增长率</h4>
      <div style={{ width: '100%', height: '13vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default YearGrowth;